<!--
 * @Author: Meow
 * @Date: 2019-09-26 15:59:40
 * @LastEditors: Meow
 * @LastEditTime: 2019-10-09 14:11:36
 * @Description: 服务资源管理
 -->
<template>
  <div id="ResourcesManagement">
    <div class="aside">
      <el-tree :data="treeData"
               :props="defaultProps"
               @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="Content">
      <h1>服务资源发布</h1>
      <div class="Main">
        <div class="main-top">
          <div class="box1">
            <label>名称：</label>
            <el-input v-model="input"
                      placeholder="请输入内容"></el-input>
          </div>
          <div class="box2">
            <label>状态：</label>
            <el-select v-model="value"
                       placeholder="请选择">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </div>
          <el-button type="primary">搜索</el-button>
        </div>
        <div class="main-content">
          <el-table :data="tableData"
                    stripe
                    border
                    highlight-current-row
                    style="width: 100%">
            <el-table-column prop="name"
                             label="名称"></el-table-column>
            <el-table-column prop="address"
                             label="访问地址"
                             align="center"></el-table-column>
            <el-table-column prop="type"
                             label="服务资源类型"
                             align="center"></el-table-column>
            <el-table-column prop="mode"
                             label="融合方式"
                             align="center"></el-table-column>
            <el-table-column prop="rule"
                             label="分权分域规则"
                             align="center"></el-table-column>
            <el-table-column prop="desc"
                             label="功能描述"
                             align="center"></el-table-column>
            <el-table-column label="元数据"
                             align="center">查看</el-table-column>
            <el-table-column label="操作"
                             align="center">发布</el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ResourcesManagementView",
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    treeData: {
      type: Array,
      default: () => []
    },
    defaultProps: {
      type: Object,
      default: () => { }
    },
    options: {
      type: Array,
      default: () => []
    },
    input: {
      type: String,
      default: () => ""
    },
    value: {
      type: String,
      default: () => ""
    }
  },
  data () {
    return {};
  },
  methods: {
    handleNodeClick (data) {
      console.log(data);
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./ResourcesManagement");
</style>
